/* 定义CSS变量：统一管理重复使用的颜色、间距、圆角等，便于全局修改和维护 */
:root {
    /* 颜色变量：基于白色的半透明色，数值表示不透明度（0.05=5%） */
    --white-5: rgba(255, 255, 255, 0.05);    /* 5%白色透明度（最浅） */
    --white-10: rgba(255, 255, 255, 0.1);   /* 10%白色透明度（常用背景） */
    --white-15: rgba(255, 255, 255, 0.15);  /* 15%白色透明度（选中状态） */
    --white-20: rgba(255, 255, 255, 0.2);   /* 20%白色透明度（边框） */
    --white-30: rgba(255, 255, 255, 0.3);   /* 30%白色透明度（滚动条/边框） */
    --white-50: rgba(255, 255, 255, 0.5);   /* 50%白色透明度（悬停滚动条） */
    --red-accent: #ff4d4f;                  /* 强调色：公益链接红色 */
    
    /* 圆角变量：按尺寸分类，统一风格 */
    --radius-sm: 8px;    /* 小圆角（图标、小卡片） */
    --radius-md: 10px;   /* 中圆角（卡片、视频） */
    --radius-lg: 20px;   /* 大圆角（主窗口） */
    
    /* 过渡动画变量：统一所有元素的过渡效果，保持动画一致性 */
    --transition: all 0.3s ease;
    
    /* 间距变量：按尺寸分类，控制元素间距离 */
    --gap-sm: 5px;       /* 小间距（图标与文字） */
    --gap-md: 15px;      /* 中间距（导航项、卡片内元素） */
    --gap-lg: 20px;      /* 大间距（卡片间、区域间） */
    --gap-xl: 30px;      /* 超大间距（主要区域分隔） */
}

/* 全局样式重置：清除所有元素默认的margin和padding，避免浏览器默认样式差异 */
* {
    margin: 0;           /* 清除默认外边距 */
    padding: 0;          /* 清除默认内边距 */
    box-sizing: border-box;  /* 盒模型设置为border-box：宽度=内容+内边距+边框（避免尺寸计算偏差） */
}

/* 页面基础样式：控制整个页面的布局和默认样式 */
body {
    font-family: 'Arial', sans-serif;  /* 全局字体：Arial（无衬线字体，显示清晰） */
    overflow: hidden;                  /* 隐藏页面整体滚动条（避免外层滚动干扰内部内容） */
    height: 100vh;                     /* 页面高度=视口高度（占满屏幕） */
    display: flex;                     /* 使用flex布局 */
    justify-content: center;           /* 水平居中对齐子元素（使主窗口居中） */
    align-items: center;               /* 垂直居中对齐子元素（使主窗口居中） */
    background-color: #000;            /* 页面背景色：黑色（与毛玻璃效果搭配） */
}


/* ==================== 背景样式 ==================== */
.background {
    position: fixed;       /* 固定定位：脱离文档流，覆盖整个屏幕 */
    top: 0;                /* 顶部与视口顶部对齐 */
    left: 0;               /* 左侧与视口左侧对齐 */
    width: 100%;           /* 宽度=100%视口宽度 */
    height: 100%;          /* 高度=100%视口高度 */
    background-size: cover; /* 背景图自适应：覆盖容器且保持比例（不拉伸） */
    background-position: center; /* 背景图居中显示（避免关键部分被裁剪） */
    z-index: -1;           /* 层级=-1：置于所有内容下方（不遮挡内容） */
    filter: blur(2px) brightness(0.7); /* 背景图效果：模糊2px（弱化背景）+ 亮度70%（增强文字可读性） */
}


/* ==================== 毛玻璃主窗口 ==================== */
.frosted-glass {
    width: 80%;            /* 宽度=80%父容器（父容器为body，即80%视口宽度） */
    max-width: 1200px;     /* 最大宽度=1200px（避免大屏幕上过宽） */
    height: 80vh;          /* 高度=80%视口高度 */
    background: var(--white-10); /* 背景：10%白色透明度（毛玻璃底色） */
    -webkit-backdrop-filter: blur(15px); /* Safari兼容：毛玻璃模糊效果（15px模糊度） */
    backdrop-filter: blur(15px); /* 毛玻璃核心效果：模糊背景内容（15px模糊度） */
    border-radius: var(--radius-lg); /* 圆角：20px（大圆角，增强现代感） */
    border: 1px solid var(--white-20); /* 边框：1px实线+20%白色透明度（增强边框层次感） */
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.3); /* 阴影：x=0,y=12px,模糊30px,透明度30%（增强立体感） */
    overflow: hidden;      /* 隐藏溢出内容（避免内部元素超出窗口） */
    display: flex;         /* 使用flex布局（垂直方向排列子元素） */
    flex-direction: column; /* 子元素垂直排列（从上到下：头部→导航→内容） */
    transition: var(--transition); /* 过渡效果：所有属性变化时0.3s平滑过渡（悬停动画） */
}


/* ==================== 响应式断点优化 ==================== */
/* 电脑端样式（屏幕宽度≥800px） */
@media (min-width: 800px) {
    .frosted-glass {
        max-height: 90vh; /* 最大高度=90%视口高度（大屏幕显示更多内容） */
    }
}

/* 平板样式（屏幕宽度576px~799px） */
@media (min-width: 576px) and (max-width: 799px) {
    .websites-container,  /* 网站卡片容器 */
    .project-list {       /* 项目卡片容器 */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 网格列：最小宽度200px，自动填充（适配平板宽度） */
    }
}

/* 移动端样式（屏幕宽度≤575px） */
@media (max-width: 575px) {
    .frosted-glass {
        width: 95%;       /* 宽度=95%视口宽度（贴近屏幕边缘，利用空间） */
        height: 80vh;     /* 高度=90%视口高度（显示更多内容） */
    }
    
    .folder-tab {         /* 导航按钮 */
        min-width: 60px;  /* 最小宽度=60px（避免按钮过宽挤压） */
        padding: 10px 12px; /* 内边距：上下10px,左右12px（减小间距，适配小屏幕） */
    }
    
    /* .folder-icon {        导航图标
        font-size: 20px;  /* 图标大小=20px（减小图标，适配小屏幕） 
    } */
    .folder-icon {          /* 导航图标 */
    width: 24px;        /* 控制图标大小 */
    height: 24px;       /* 图标大小=20px（减小图标，适配小屏幕） */
    fill: white;        /* 填充颜色（如果SVG没有硬编码颜色） */
    transition: fill 0.3s; /* 悬停效果过渡 */
    }

    
    .tab-content {        /* 内容区域 */
        padding: 15px;    /* 内边距=15px（减小内边距，节省空间） */
    }
    
    .home-video {         /* 首页视频容器 */
        width: 90%;       /* 宽度=90%（贴近屏幕，避免过窄） */
    }
    
    .websites-container,  /* 网站卡片容器 */
    .project-list {       /* 项目卡片容器 */
        grid-template-columns: 1fr; /* 网格列：1列（单列布局，适配手机屏幕） */
    }
}


/* ==================== 顶部区域（Logo+标题） ==================== */
.header {
    display: flex;        /* 使用flex布局（水平排列子元素） */
    align-items: center;  /* 子元素垂直居中对齐（Logo与标题对齐） */
    gap: var(--gap-md);   /* 子元素间距=15px（Logo与标题的距离） */
    padding: 20px;        /* 内边距=20px（上下左右留白） */
    background: var(--white-10); /* 背景：10%白色透明度（与主窗口呼应） */
    border-bottom: 1px solid var(--white-10); /* 下边框：1px实线+10%白色透明度（分隔头部与导航） */
    flex-shrink: 0;       /* 不允许压缩（保持自身高度，不被内容区域挤压） */
    min-height: 60px;     /* 最小高度=60px（确保内容不溢出，同时允许内容撑开高度） */
}

.logo {
    width: 40px;          /* Logo宽度=40px */
    height: 40px;         /* Logo高度=40px（正方形） */
    border-radius: var(--radius-sm); /* 圆角=8px（小圆角，与Logo尺寸匹配） */
}

.header h2 {
    color: white;         /* 文字颜色：白色（与深色背景对比，增强可读性） */
    font-size: 1.375rem;  /* 字体大小=22px（1rem=16px，1.375×16=22） */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 文字阴影：x=0,y=1px,模糊2px,透明度30%（增强文字立体感） */
}


/* ==================== 文件夹导航（标签栏） ==================== */
.folder-nav {
    display: flex;        /* 使用flex布局（水平排列导航按钮） */
    border-bottom: 1px solid var(--white-10); /* 下边框：1px实线+10%白色透明度（分隔导航与内容） */
    overflow-x: auto;     /* 水平溢出时显示滚动条（导航按钮过多时可横向滚动） */
    scrollbar-width: none; /* Firefox：隐藏滚动条（美观） */
    flex-shrink: 0;       /* 不允许压缩（保持高度，不被内容区域挤压） */
    min-height: 60px;     /* 最小高度=60px（确保按钮内容不溢出） */
}

.folder-nav::-webkit-scrollbar { /* Chrome/Safari：隐藏滚动条（通过设置display:none） */
    display: none;
}

.folder-tab {
    display: flex;        /* 使用flex布局（垂直排列图标与文字） */
    flex-direction: column; /* 子元素垂直排列（图标在上，文字在下） */
    align-items: center;  /* 子元素水平居中（图标与文字居中对齐） */
    justify-content: center; /* 子元素垂直居中（在导航栏内居中） */
    padding: 10px 10px;   /* 内边距：上下15px,左右20px（按钮点击区域） */
    min-width: 80px;      /* 最小宽度=80px（避免按钮过窄，内容挤压） */
    background: transparent; /* 背景透明（默认状态） */
    border: none;         /* 无边框（减少干扰） */
    color: white;         /* 文字颜色：白色 */
    cursor: pointer;      /* 鼠标悬停时显示手型（提示可点击） */
    transition: var(--transition); /* 过渡效果：0.3s平滑变化（悬停/选中动画） */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 文字阴影：增强可读性 */
}

.folder-tab:hover { /* 鼠标悬停时样式 */
    background: var(--white-5); /* 背景：5%白色透明度（轻微高亮，反馈交互） */
}

.folder-tab.active { /* 选中状态样式（当前激活的导航项） */
    background: var(--white-15); /* 背景：15%白色透明度（明显高亮，区分选中状态） */
    border-bottom: 2px solid #fff; /* 下边框：2px白色实线（突出选中状态） */
}

/*.folder-icon {
    font-size: 24px;      /* 图标大小=24px（与文字比例协调） 
    margin-bottom: var(--gap-sm); /* 底部间距=5px（图标与文字的距离）
} */
.folder-icon {
  width: 24px;        /* 控制图标大小 */
  height: 24px;
  fill: white;        /* 填充颜色（如果SVG没有硬编码颜色） */
  transition: fill 0.3s; /* 悬停效果过渡 */
  margin-bottom: var(--gap-sm);
}



/* ==================== 内容区域（标签页内容） ==================== */
.content-container {
    flex-grow: 1;         /* 占据剩余空间（自动填充主窗口剩余高度） */
    overflow-y: auto;     /* 垂直溢出时显示滚动条（内容过多时可纵向滚动） */
    scrollbar-width: thin; /* Firefox：滚动条细样式（美观） */
    scrollbar-color: var(--white-30) transparent; /* Firefox：滚动条颜色（滑块30%白，轨道透明） */
}

.content-container::-webkit-scrollbar { /* Chrome/Safari：滚动条宽度=8px */
    width: 8px;
}

.content-container::-webkit-scrollbar-track { /* Chrome/Safari：滚动条轨道背景透明 */
    background: transparent;
}

.content-container::-webkit-scrollbar-thumb { /* Chrome/Safari：滚动条滑块样式 */
    background-color: var(--white-30); /* 滑块颜色：30%白色透明度 */
    border-radius: 4px;   /* 滑块圆角=4px（与滑块宽度匹配） */
}

.content-container::-webkit-scrollbar-thumb:hover { /* 滑块悬停样式 */
    background-color: var(--white-50); /* 滑块颜色：50%白色透明度（高亮反馈） */
}

.tab-content {
    padding: 30px;        /* 内边距=30px（内容与容器边缘的距离） */
    color: white;         /* 文字颜色：白色 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 文字阴影：增强可读性 */
    display: none;        /* 默认隐藏（通过active类控制显示） */
}

.tab-content.active { /* 激活状态的内容区域（当前显示的标签页） */
    display: block;       /* 显示内容（块级元素，占满一行） */
}


/* ==================== 首页内容区样式 ==================== */
.home-section {
    text-align: center;   /* 内容居中对齐（标题、视频、链接居中） */
}

.home-section h2 {
    margin-bottom: var(--gap-lg); /* 底部间距=20px（标题与视频的距离） */
}

.home-video {
    width: 60%;           /* 宽度=60%父容器（视频容器宽度） */
    max-width: 3000px;    /* 最大宽度=3000px（避免视频过宽） */
    margin: var(--gap-lg) auto; /* 外边距：上下20px,左右自动（视频居中） */
}

.home-video video {
    width: 100%;          /* 视频宽度=100%容器宽度（自适应容器） */
    height: auto;         /* 高度自动（保持视频比例，避免拉伸） */
    border-radius: var(--radius-md); /* 圆角=10px（视频圆角，与整体风格统一） */
}

.charity-link {
    margin-top: var(--gap-xl); /* 顶部间距=30px（与视频的距离） */
}

.charity-link a {
    color: var(--red-accent); /* 链接颜色：红色（强调公益链接） */
    font-weight: bold;    /* 文字加粗（突出显示） */
    text-decoration: none; /* 无下划线（默认状态，保持简洁） */
}


/* ==================== 网站内容区样式（网站卡片） ==================== */
.websites-container {
    display: grid;        /* 使用网格布局（多列排列网站卡片） */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 列规则：最小宽度250px，自动填充列数 */
    gap: var(--gap-lg);   /* 网格间距=20px（卡片间距离） */
    margin-top: var(--gap-lg); /* 顶部间距=20px（与标题的距离） */
}

.website-card {
    display: flex;        /* 使用flex布局（水平排列图标与文字） */
    background: var(--white-5); /* 背景：5%白色透明度（卡片底色） */
    border-radius: var(--radius-md); /* 圆角=10px（中圆角） */
    padding: var(--gap-lg); /* 内边距=20px（卡片内边距） */
    transition: var(--transition); /* 过渡效果：0.3s平滑变化（悬停动画） */
    color: white;         /* 文字颜色：白色 */
    text-decoration: none; /* 无下划线（链接默认样式） */
    align-items: center;  /* 子元素垂直居中（图标与文字对齐） */
}

.website-card:hover { /* 鼠标悬停时样式 */
    transform: translateY(-5px); /* 上移5px（悬浮效果，增强交互感） */
    background: var(--white-10); /* 背景：10%白色透明度（高亮卡片） */
}

.website-card:focus { /* 键盘聚焦时样式（ accessibility优化） */
    outline: 2px solid var(--white-30); /* 聚焦边框：2px实线+30%白色（提示当前聚焦） */
    outline-offset: 2px; /* 边框偏移2px（避免与卡片边缘重叠） */
}

.website-favicon {
    width: 40px;          /* 网站图标宽度=40px */
    height: 40px;         /* 网站图标高度=40px（正方形） */
    border-radius: var(--radius-sm); /* 圆角=8px（与图标尺寸匹配） */
    margin-right: var(--gap-md); /* 右侧间距=15px（图标与文字的距离） */
    object-fit: cover;    /* 图片填充方式：裁剪多余部分（不拉伸，保持比例） */
}

.website-info h3 {
    margin-bottom: var(--gap-sm); /* 底部间距=5px（标题与描述的距离） */
    font-size: 18px;      /* 标题大小=18px（突出显示） */
}

.website-info p {
    font-size: 14px;      /* 描述文字大小=14px（次要信息，稍小） */
    opacity: 0.8;         /* 透明度80%（弱化描述，突出标题） */
}

.category-title {
    margin: var(--gap-xl) 0 var(--gap-sm); /* 外边距：上30px,左右0,下5px（分类标题与上下内容的距离） */
    padding-bottom: 5px;  /* 底部内边距=5px（文字与下边框的距离） */
    border-bottom: 1px solid var(--white-10); /* 下边框：1px实线+10%白色（分隔分类） */
    font-size: 22px;      /* 标题大小=22px（突出分类） */
}


/* ==================== 项目内容区样式（项目卡片） ==================== */
.project-list {
    display: grid;        /* 使用网格布局（多列排列项目卡片） */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 列规则：同网站卡片 */
    gap: var(--gap-lg);   /* 网格间距=20px（卡片间距离） */
}

.project-card {
    display: flex;        /* 使用flex布局（水平排列图标与文字） */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 图标和信息之间的间距 */
    background: var(--white-5); /* 背景：5%白色透明度（卡片底色） */
    border-radius: var(--radius-md); /* 圆角=10px */
    padding: var(--gap-lg); /* 内边距=20px */
    transition: var(--transition); /* 过渡效果：0.3s平滑变化 */
    color: white;         /* 文字颜色：白色 */
    text-decoration: none; /* 无下划线（链接样式） */
}

.project-card:hover { /* 鼠标悬停时样式 */
    transform: translateY(-5px); /* 上移5px（悬浮效果） */
    background: var(--white-10); /* 背景：10%白色透明度（高亮） */
}

.project-card:focus { /* 键盘聚焦样式 */
    outline: 2px solid var(--white-30); /* 聚焦边框 */
    outline-offset: 2px; /* 边框偏移 */
}

.project-icon {
    width: 36px;         /* 图标宽度=36px */
    font-size: 36px;      /* 图标大小=36px（突出项目类型） */
    margin-right: var(--gap-md); /* 右侧间距=15px（图标与文字距离） */
}

.project-info h3 {
    margin-bottom: var(--gap-sm); /* 底部间距=5px（标题与描述距离） */
}


/* ==================== 关于内容区样式 ==================== */
.about-content {
    display: flex;        /* 使用flex布局（垂直排列内容） */
    flex-direction: column; /* 子元素垂直排列（头像→文字→技能） */
    align-items: center;  /* 子元素水平居中（整体居中显示） */
    text-align: center;   /* 文字居中（增强可读性） */
}

.about-avatar {
    width: 150px;         /* 头像宽度=150px */
    height: 150px;        /* 头像高度=150px（正方形） */
    border-radius: 50%;   /* 圆角50%（圆形头像） */
    overflow: hidden;     /* 隐藏溢出内容（确保图片按圆形显示） */
    margin-bottom: var(--gap-lg); /* 底部间距=20px（头像与文字距离） */
    border: 3px solid var(--white-30); /* 边框：3px实线+30%白色（突出头像） */
}

.about-avatar img {
    width: 100%;          /* 图片宽度=100%容器宽度（填充头像框） */
    height: 100%;         /* 图片高度=100%容器高度（填充头像框） */
    object-fit: cover;    /* 图片填充方式：裁剪多余部分（不拉伸） */
}

.about-text {
    margin-bottom: var(--gap-lg); /* 底部间距=20px（文字与技能距离） */
}

.skills-list {
    display: flex;        /* 使用flex布局（水平排列技能标签） */
    flex-wrap: wrap;      /* 超出宽度时自动换行（避免横向溢出） */
    justify-content: center; /* 子元素水平居中（技能标签居中） */
    gap: var(--gap-sm);   /* 间距=5px（标签间距离） */
    margin-top: var(--gap-lg); /* 顶部间距=20px（与文字距离） */
}

.skill-tag {
    background: var(--white-10); /* 背景：10%白色透明度（标签底色） */
    padding: 5px 15px;    /* 内边距：上下5px,左右15px（标签大小） */
    border-radius: 20px;  /* 圆角20px（胶囊形状，增强现代感） */
}


/* ==================== 联系方式样式 ==================== */
.contact-info {
    margin: var(--gap-xl) 0; /* 外边距：上下30px,左右0（与上下内容距离） */
    width: 100%;          /* 宽度=100%（占满内容区） */
}

.contact-links {
    display: flex;        /* 使用flex布局（水平排列联系方式） */
    justify-content: center; /* 子元素水平居中（联系方式居中） */
    gap: var(--gap-lg);   /* 间距=20px（联系方式间距离） */
    margin-top: 15px;     /* 顶部间距=15px（与标题距离） */
    flex-wrap: wrap;      /* 移动端自动换行（避免挤压） */
}

.contact-link {
    display: flex;        /* 使用flex布局（垂直排列图标与文字） */
    flex-direction: column; /* 子元素垂直排列（图标在上，文字在下） */
    align-items: center;  /* 子元素水平居中 */
    color: white;         /* 文字颜色：白色 */
    text-decoration: none; /* 无下划线（链接样式） */
    padding: 10px 15px;   /* 内边距：上下10px,左右15px（点击区域） */
    border-radius: var(--radius-md); /* 圆角=10px（与卡片风格统一） */
    background: var(--white-5); /* 背景：5%白色透明度（标签底色） */
    transition: var(--transition); /* 过渡效果：0.3s平滑变化 */
}

.contact-link:hover { /* 鼠标悬停样式 */
    background: var(--white-10); /* 背景：10%白色透明度（高亮） */
    transform: translateY(-3px); /* 上移3px（轻微悬浮效果） */
}

.contact-link:focus { /* 键盘聚焦样式 */
    outline: 2px solid var(--white-30); /* 聚焦边框 */
    outline-offset: 2px; /* 边框偏移 */
}

.contact-icon {
    width: 24px;        /* 图标大小 */
    height: 24px;
    fill: white;        /* 填充颜色 */      /* 图标大小=24px（突出联系方式类型） */
    margin-bottom: var(--gap-sm); /* 底部间距=5px（图标与文字距离） */
}


/* ==================== 主窗口悬停效果 ==================== */
.frosted-glass:hover {
    transform: translateY(-5px); /* 上移5px（悬浮效果，增强交互感） */
    box-shadow: 0 16px 36px 0 rgba(0, 0, 0, 0.4); /* 阴影增强：模糊36px,透明度40%（增强立体感） */
}
/* ==================== 页脚样式 ==================== */
.footer {
    padding: 10px; /* 内边距为10px */
    background: var(--white-10); /* 使用自定义变量设置背景色 */
    border-top: 1px solid var(--white-10); /* 顶部边框为1px的浅白色 */
    flex-shrink: 0; /* 防止页脚在空间不足时收缩 */
    min-height: 40px; /* 最小高度为40px */
    color: white; /* 文本颜色为白色 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 添加文本阴影增强可读性 */
    /* 新增：添加盒子阴影 */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    /* 新增：添加圆角效果 */
    border-radius: 30px 30px 30px 30px; /* 只给顶部两个角添加圆角 */
    margin-top: 30px;
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 桌面端：正常布局，不滚动 */
.footer-content {
    justify-content: center; /* 水平居中对齐子元素 */
    align-items: center; /* 垂直居中对齐子元素 */
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap; /* 防止内容换行 */
}

/* 移动端：启用轮播 */
@media (max-width: 768px) {
    .footer-content {
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中对齐子元素 */
        display: flex;
        white-space: nowrap; /* 防止内容换行 */
        animation: carousel 8s linear infinite; /* 应用滚动动画 */
    }
    
    /* 悬停时暂停轮播 */
    .footer-content:hover {
        animation-play-state: paused;
    }
    
    /* 滚动动画定义 */
    @keyframes carousel {
        0% {
            transform: translateX(50%);
        }
        100% {
            transform: translateX(-100%); /* 滚动距离为内容宽度的一半 */
        }
    }
    
    /* 复制内容以实现无缝滚动 */
    .footer-content::after {
        content: attr(data-content);
        display: inline-block;
        margin-left: 20px; /* 内容间距 */
    }
}

/* 页脚内链接样式 */
.footer a {
    margin: 0 5px;
    text-decoration: none;
    transition: color 0.3s;
    display: inline-block;
}

.footer a:hover {
    color: #ffcc00;
    text-decoration: underline;
}

.project-icon svg {
    fill: #ffffff; /* 将 #your-color 替换为你想要的颜色，例如 #ff0000 表示红色 */
    width: 24px; /* 设置图标宽度，可根据需要调整 */
    height: 24px; /* 设置图标高度，可根据需要调整 */
}